<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <h3>Weblog</h3>
        <el-col :span="24">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#001428"
            text-color="#c0c4cc"
            active-text-color="#fff"
            router
          >
            <el-menu-item index="/houtai/yibiao">
              <i class="el-icon-s-platform"></i>
              <span slot="title">仪表盘</span>
            </el-menu-item>
            <el-menu-item index="/houtai/wenzhang">
              <i class="el-icon-document"></i>
              <span slot="title">文章管理</span>
            </el-menu-item>
            <el-menu-item index="/houtai/fenguan">
              <i class="el-icon-folder-opened"></i>
              <span slot="title">分类管理</span>
            </el-menu-item>
            <el-menu-item index="/houtai/biaoguan">
              <i class="el-icon-discount"></i>
              <span slot="title">标签管理</span>
            </el-menu-item>
            <el-menu-item index="/houtai/shezhi">
              <i class="el-icon-setting"></i>
              <span slot="title">博客设置</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-header class="clearFix adhead">
          <div class="clearFix xianchu">
            <i class="el-icon-s-fold"></i>
          </div>
          <div class="admin">
            <img :src="avatar.avatar" alt="" />
            <span>{{ avatar.username }}</span>
          </div>
          <div class="clearFix youfnag">
            <i @click="huiqian" class="el-icon-house"></i>
            <i class="el-icon-refresh"></i>
            <i class="el-icon-full-screen"></i>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          <span> Copyright © 2023. All rights reserved. Provided by</span>
          <a class="quanxiaoha" href="https://www.quanxiaoha.com/">犬小哈</a>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: null,
      avatar: {
        avatar: "",
        username: "加载中...", 
      },
    };
  },
  created() {
    this.token = localStorage.getItem("token");
    this.getCxu();
  },
  methods: {
    huiqian(){
      this.$router.push("/home/shouye")
    },
    async getCxu() {
      if (!this.token) {
        this.$message.error("请先登录");
        this.$router.push("/login");
        return;
      }
      try {
        let res = await this.$axios.post(
          "/admin/detail",
          {},
          {
            headers: {
              Authorization: `Bearer ${this.token}`,
            },
          }
        );
        console.log("接口请求成功：", res);
        this.avatar = res.data.data;
      } catch (error) {
        console.error("接口请求失败：", error);
        if (error.response?.status === 401) {
          this.$message.error("登录已过期，请重新登录");
          localStorage.removeItem("token");
          this.$router.push("/login");
        }
      }
    },
  },
};
</script>

<style scoped>
.clearFix::after {
  content: "";
  clear: both;
  display: block;
}
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #001428;
  color: #c0c4cc;
  text-align: center;
  line-height: 3.125rem;
}

.el-main {
  background-color: #f4f4f4;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  /* overflow: hidden; */
}
.xianchu {
  float: left;
}
.youfnag {
  float: right;
}
.youfnag i {
  padding: 0.625rem;
}
.admin {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  width: 6.25rem;
  float: right;
}
.admin img {
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 50%;
  /* vertical-align: middle; */
  float: right;
}
.admin span {
  /* vertical-align: middle; */
  float: right;
}

.biaoyi {
  float: left;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.quanxiaoha {
  color: #3498db;
  text-decoration: underline;
}
.adhead {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 88%;
  height: 3.75rem;
}
</style>